import React, { cloneElement, useCallback, useSyncExternalStore, useTransition } from 'react'
import { TabBar } from './styledTabbar'
import store from './store'

export default function Tabbar({
  children,
  currentTab,
  activeColor,
  inActiveColor,
  fixed
}) {

  // const [ currentName, setCurrentName ] = useState(currentTab)
  // const state = useSyncExternalStore(store.subscribe, () => {
  //   return store.getSnapshot()
  // })

  const [ isPending, startTransition ] = useTransition()

  const handleItemClick = useCallback((name) => {
    return () => {
      startTransition(() => {
        store.dispatch({
          type: 'change',
          tabName: name
        })
      })
    }
  }, [])

  return (
    <TabBar
      fixed={fixed}
    >
      {
        React.Children.map(children, (child) => {
          return cloneElement(child, {
            activeColor,
            inActiveColor,
            handleItemClick
          })
        })
      }
    </TabBar>
  )
}
